<template>
  <div class="h-full max-w-6xl mx-auto overflow-y-auto">
    <div class="bg-white shadow-xl rounded-2xl p-8 border border-gray-100">
      <!-- 页面标题 -->
      <div class="text-center mb-8">
        <h2 class="text-3xl font-bold text-gray-900 mb-2">帮助中心</h2>
        <p class="text-gray-600">智能文件去重工具使用指南</p>
        <div class="mt-4 text-sm text-gray-500">
          <p>开发商：河南宾纳瑞网络科技有限公司</p>
          <a href="https://www.binnarui.com" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
            https://www.binnarui.com
          </a>
        </div>
      </div>

      <!-- 帮助内容 -->
      <div class="space-y-8">
        <!-- 快速开始 -->
        <div class="bg-blue-50 rounded-xl p-6 border border-blue-100">
          <h3 class="text-xl font-semibold text-blue-900 mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
            快速开始
          </h3>
          <div class="space-y-3 text-blue-800">
            <p><strong>1.</strong> 选择要扫描的目录</p>
            <p><strong>2.</strong> 配置扫描参数（检测模式、扫描模式、相似性阈值）</p>
            <p><strong>3.</strong> 选择文件类型过滤（图片、视频、音频、文档、压缩包）</p>
            <p><strong>4.</strong> 点击"开始扫描"</p>
            <p><strong>5.</strong> 查看扫描结果并使用选择助手处理重复文件</p>
          </div>
        </div>

        <!-- 扫描配置 -->
        <div class="bg-green-50 rounded-xl p-6 border border-green-100">
          <h3 class="text-xl font-semibold text-green-900 mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
            扫描配置
          </h3>
          <div class="grid md:grid-cols-2 gap-6">
            <div class="space-y-4">
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-green-800 mb-2">🔍 检测模式</h4>
                <div class="space-y-2 text-sm text-green-700">
                  <p><strong>完全一致：</strong>基于文件哈希值，100%相同的文件才会被认为是重复</p>
                  <p><strong>智能相似：</strong>基于内容分析，识别相似文件，可调节相似性阈值（70%-99%）</p>
                </div>
              </div>
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-green-800 mb-2">⚡ 扫描模式</h4>
                <div class="space-y-2 text-sm text-green-700">
                  <p><strong>快速扫描：</strong>基于文件大小和部分哈希值，速度快但准确性较低</p>
                  <p><strong>深度扫描：</strong>完整哈希值计算，准确性高但速度较慢</p>
                </div>
              </div>
            </div>
            <div class="space-y-4">
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-green-800 mb-2">📁 文件类型过滤</h4>
                <div class="space-y-2 text-sm text-green-700">
                  <p><strong>图片：</strong>JPG, PNG, GIF, BMP, WebP, SVG, RAW等</p>
                  <p><strong>视频：</strong>MP4, AVI, MKV, MOV, WMV, FLV等</p>
                  <p><strong>音频：</strong>MP3, WAV, FLAC, AAC, OGG等</p>
                  <p><strong>文档：</strong>PDF, DOC, XLS, PPT, TXT等</p>
                  <p><strong>压缩包：</strong>ZIP, RAR, 7Z, TAR等</p>
                </div>
              </div>
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-green-800 mb-2">⚙️ 高级选项</h4>
                <div class="space-y-2 text-sm text-green-700">
                  <p><strong>包含子文件夹：</strong>递归扫描子目录</p>
                  <p><strong>相似性阈值：</strong>智能相似模式下的匹配精度</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 选择助手 -->
        <div class="bg-purple-50 rounded-xl p-6 border border-purple-100">
          <h3 class="text-xl font-semibold text-purple-900 mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
            </svg>
            选择助手
          </h3>
          <div class="grid md:grid-cols-2 gap-6">
            <div class="space-y-4">
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-purple-800 mb-2">📋 选择规则</h4>
                <div class="space-y-2 text-sm text-purple-700">
                  <p><strong>最大文件大小：</strong>保留每组中最大的文件</p>
                  <p><strong>最小文件大小：</strong>保留每组中最小的文件</p>
                  <p><strong>最大分辨率：</strong>保留每组中分辨率最高的图片</p>
                  <p><strong>最小分辨率：</strong>保留每组中分辨率最低的图片</p>
                  <p><strong>最新修改：</strong>保留每组中最新修改的文件</p>
                  <p><strong>最早修改：</strong>保留每组中最早修改的文件</p>
                </div>
              </div>
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-purple-800 mb-2">🔤 文本模式选择</h4>
                <div class="space-y-2 text-sm text-purple-700">
                  <p><strong>文件名匹配：</strong>根据文件名模式选择文件</p>
                  <p><strong>路径匹配：</strong>根据目录路径模式选择文件</p>
                  <p><strong>匹配类型：</strong>包含、开头、结尾、正则表达式</p>
                </div>
              </div>
            </div>
            <div class="space-y-4">
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-purple-800 mb-2">📁 目录位置选择</h4>
                <div class="space-y-2 text-sm text-purple-700">
                  <p><strong>标记其他目录：</strong>选择其他目录中的重复文件</p>
                  <p><strong>标记当前文件夹：</strong>选择指定文件夹中的重复文件</p>
                  <p><strong>反选功能：</strong>配合反选实现更精确的选择</p>
                </div>
              </div>
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-purple-800 mb-2">⚡ 快速操作</h4>
                <div class="space-y-2 text-sm text-purple-700">
                  <p><strong>全选/取消全选：</strong>快速选择或取消选择所有文件</p>
                  <p><strong>反选：</strong>反转当前选择状态</p>
                  <p><strong>取消：</strong>清除所有选择</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 排序功能 -->
        <div class="bg-indigo-50 rounded-xl p-6 border border-indigo-100">
          <h3 class="text-xl font-semibold text-indigo-900 mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
            </svg>
            排序功能
          </h3>
          <div class="grid md:grid-cols-2 gap-6">
            <div class="space-y-4">
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-indigo-800 mb-2">📊 排序选项</h4>
                <div class="space-y-2 text-sm text-indigo-700">
                  <p><strong>按组大小：</strong>按每组文件数量排序</p>
                  <p><strong>按文件大小：</strong>按文件大小排序</p>
                  <p><strong>按文件名：</strong>按文件名字母顺序排序</p>
                  <p><strong>按文件路径：</strong>按完整路径排序</p>
                  <p><strong>按修改日期：</strong>按文件修改时间排序</p>
                  <p><strong>按可节省空间：</strong>按每组可节省的空间排序</p>
                </div>
              </div>
            </div>
            <div class="space-y-4">
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-indigo-800 mb-2">🔄 排序控制</h4>
                <div class="space-y-2 text-sm text-indigo-700">
                  <p><strong>升序/降序：</strong>可切换升序和降序排列</p>
                  <p><strong>实时排序：</strong>选择排序方式后立即生效</p>
                  <p><strong>自动排序：</strong>数据变化时自动重新排序</p>
                  <p><strong>保持状态：</strong>排序设置会在页面刷新后保持</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 文件操作 -->
        <div class="bg-orange-50 rounded-xl p-6 border border-orange-100">
          <h3 class="text-xl font-semibold text-orange-900 mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1-1H9a1 1 0 00-1 1v3M4 7h16"></path>
            </svg>
            文件操作
          </h3>
          <div class="grid md:grid-cols-2 gap-6">
            <div class="space-y-4">
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-orange-800 mb-2">🗑️ 删除选项</h4>
                <div class="space-y-2 text-sm text-orange-700">
                  <p><strong>移动到回收站：</strong>安全删除，可恢复文件</p>
                  <p><strong>直接删除：</strong>永久删除，不可恢复</p>
                  <p><strong>清理空文件夹：</strong>删除文件后自动清理空目录</p>
                </div>
              </div>
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-orange-800 mb-2">👁️ 预览功能</h4>
                <div class="space-y-2 text-sm text-orange-700">
                  <p><strong>图片预览：</strong>支持常见图片格式</p>
                  <p><strong>视频预览：</strong>支持常见视频格式</p>
                  <p><strong>音频预览：</strong>支持常见音频格式</p>
                  <p><strong>文件信息：</strong>显示文件大小、修改日期等</p>
                </div>
              </div>
            </div>
            <div class="space-y-4">
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-orange-800 mb-2">🔄 刷新功能</h4>
                <div class="space-y-2 text-sm text-orange-700">
                  <p><strong>验证文件存在性：</strong>自动检查文件是否还存在</p>
                  <p><strong>清理已删除文件：</strong>从列表中移除不存在的文件</p>
                  <p><strong>移除单文件组：</strong>自动清理不再重复的文件组</p>
                </div>
              </div>
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-orange-800 mb-2">📊 统计信息</h4>
                <div class="space-y-2 text-sm text-orange-700">
                  <p><strong>总文件数：</strong>扫描到的所有文件数量</p>
                  <p><strong>重复组数：</strong>发现的重复文件组数量</p>
                  <p><strong>重复文件数：</strong>所有重复文件的总数</p>
                  <p><strong>可节省空间：</strong>删除重复文件后可节省的存储空间</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 设置功能 -->
        <div class="bg-teal-50 rounded-xl p-6 border border-teal-100">
          <h3 class="text-xl font-semibold text-teal-900 mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
            设置功能
          </h3>
          <div class="grid md:grid-cols-2 gap-6">
            <div class="space-y-4">
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-teal-800 mb-2">📁 文件类型设置</h4>
                <div class="space-y-2 text-sm text-teal-700">
                  <p><strong>自定义扩展名：</strong>为每种文件类型添加自定义扩展名</p>
                  <p><strong>图片类型：</strong>JPG, PNG, GIF, BMP, WebP, SVG, RAW等</p>
                  <p><strong>视频类型：</strong>MP4, AVI, MKV, MOV, WMV, FLV等</p>
                  <p><strong>音频类型：</strong>MP3, WAV, FLAC, AAC, OGG等</p>
                  <p><strong>文档类型：</strong>PDF, DOC, XLS, PPT, TXT等</p>
                  <p><strong>压缩包类型：</strong>ZIP, RAR, 7Z, TAR等</p>
                </div>
              </div>
            </div>
            <div class="space-y-4">
              <div class="bg-white p-4 rounded-lg">
                <h4 class="font-semibold text-teal-800 mb-2">⚙️ 应用设置</h4>
                <div class="space-y-2 text-sm text-teal-700">
                  <p><strong>自动保存：</strong>设置更改后自动保存</p>
                  <p><strong>重置默认：</strong>恢复所有设置为默认值</p>
                  <p><strong>导入导出：</strong>支持设置配置的导入导出</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 注意事项 -->
        <div class="bg-red-50 rounded-xl p-6 border border-red-100">
          <h3 class="text-xl font-semibold text-red-900 mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
            </svg>
            注意事项
          </h3>
          <div class="space-y-3 text-red-800">
            <p><strong>⚠️</strong> 扫描大目录时可能需要较长时间，请耐心等待</p>
            <p><strong>⚠️</strong> 删除文件前请确认文件内容，避免误删重要文件</p>
            <p><strong>⚠️</strong> 建议在删除前备份重要数据</p>
            <p><strong>⚠️</strong> 智能相似检测结果仅供参考，请人工确认</p>
            <p><strong>⚠️</strong> 移动到回收站功能仅在Windows系统上有效</p>
            <p><strong>⚠️</strong> 某些系统文件可能无法删除，这是正常现象</p>
          </div>
        </div>

        <!-- 快捷键 -->
        <div class="bg-gray-50 rounded-xl p-6 border border-gray-100">
          <h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
            快捷键
          </h3>
          <div class="grid md:grid-cols-2 gap-6">
            <div class="space-y-3">
              <div class="bg-white p-3 rounded-lg">
                <h4 class="font-semibold text-gray-800 mb-2">🔍 扫描操作</h4>
                <div class="space-y-1 text-sm text-gray-700">
                  <p><kbd class="bg-gray-200 px-2 py-1 rounded">Ctrl + S</kbd> 开始扫描</p>
                  <p><kbd class="bg-gray-200 px-2 py-1 rounded">Ctrl + C</kbd> 取消扫描</p>
                  <p><kbd class="bg-gray-200 px-2 py-1 rounded">F5</kbd> 刷新结果</p>
                </div>
              </div>
            </div>
            <div class="space-y-3">
              <div class="bg-white p-3 rounded-lg">
                <h4 class="font-semibold text-gray-800 mb-2">📁 文件操作</h4>
                <div class="space-y-1 text-sm text-gray-700">
                  <p><kbd class="bg-gray-200 px-2 py-1 rounded">Ctrl + A</kbd> 全选</p>
                  <p><kbd class="bg-gray-200 px-2 py-1 rounded">Ctrl + D</kbd> 取消全选</p>
                  <p><kbd class="bg-gray-200 px-2 py-1 rounded">Delete</kbd> 删除选中文件</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 返回按钮 -->
      <div class="flex justify-center pt-8 border-t border-gray-200">
        <button 
          @click="$emit('navigate', 'home')"
          class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl"
        >
          <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
          </svg>
          返回首页
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineEmits<{
  navigate: [view: string]
}>()
</script>
